<template>
	<div>
		<van-nav-bar title="订单信息" />
		<van-divider style="color: purple; borderColor: purple" />
		<div style="display: flex;margin-left: 2vh;">
			<van-image fit="cover" round width="3rem" height="3rem"
				:src="data.headImgSrc" />
			<div style="line-height: 3rem; font-size: 2vh; margin-left: 2vh;">
				{{data.sellerName}}
				<span>></span>
			</div>
		</div>
		<div style="margin-top: 2vh;margin-left: 2vh; display: flex;">
			
			<img :src="data.imgSrc"
				style="width: 12vh;height: 12vh;border-radius: 2vh;">
			<div style="margin-left: 2vh;width: 20vh;">{{data.goodName}}</div>
			<div style="text-align: right;font-size: 3vh; margin-right: 2vh;">
				<div>&yen;{{data.price}}</div>
				<div style="margin-top: 4vh; font-size: 2vh;">x{{data.number}}</div>
			</div>
		</div>
		<div style="margin:2vh">
			<div>订单编号:{{data.oid}}</div>
			<div style="margin-top: 1vh;">订单状态：{{data.statu}}</div>
			<div style="margin-top: 1vh;">创建时间：{{data.time}}</div>
		</div>
		<van-divider style="color: purple; borderColor: purple" />
		<div style="text-align: right; font-size: 4vh; color: red; margin-right: 2vh;">&yen;{{data.price*data.number}}
		</div>
		<van-divider style="color: purple; borderColor: purple" />
		<div style="text-align: right; margin-right: 2vh;">
			<el-link type="info" :underline="false" style="margin-right: 2vh;">取消订单</el-link>
			<van-button color="linear-gradient(to right, #ff6034, #ee0a24)" @click="show=true" round>
				立即支付
			</van-button>
			<van-action-sheet v-model:show="show" :actions="payWays" cancel-text="取消" close-on-click-action
				description="请选择支付方式" @select="pay" />
			<van-popup v-model:show="payPageShow" position="right" :style="{ width: '100%',height: '100%'}" closeable
				close-icon-position="top-left">
				<PayPage :url="requrl" :close="closePayPage" :data="order"></PayPage>
			</van-popup>
		</div>
	</div>
</template>

<script>
	import {
		ref
	} from 'vue';
	import PayPage from './PayPage.vue'
	import {
		showLoadingToast
	} from 'vant';
	import{
		showNotify
	}from 'vant';
	import url from '@/assets/url.json';
	export default {
		components: {
			PayPage
		},
		props: {
			data: Object,
			order: Object,
			close:Function
		},
		data() {
			return {
				requrl:url.ip+'/api-goods/orderGoods/payOrder',
				payPageShow: false
			}
		},

		setup() {
			const show = ref(false);
			const actions = [{
					name: '微信支付'
				},
				{
					name: '钱包支付'
				}
			];
			const payWays = [{
					name: '微信支付',
					label: 'wechat'
				},
				{
					name: '钱包支付',
					label: 'wallet'
				}
			];

			return {
				show,
				actions,
				payWays
			};
		},
		methods: {
			closePayPage(){
				this.payPageShow = false
				this.close()
			},
			pay(payName) {
				console.log(payName);
				switch (payName.label) {
					case 'wechat':

						showLoadingToast({
							message: '加载中...',
							forbidClick: true,
						});
						setTimeout(() => {
							this.payPageShow = true
						}, 2000);


						break;
					case 'wallet':
						showLoadingToast({
							message: '支付中...',
							forbidClick: true,
						});
						setTimeout(() => {
							this.$axios({
								url:url.ip+"/api-goods/orderGoods/updateOrder",
								method:'PUT',
								data:{
									id:this.order.id,
									status:"PAID"
								},
								headers: {
									token: this.$cookies.get('token')
							}
							}).then((res)=>{
								if(res.data.code!==0){
									showNotify({
										type: 'danger',
										message: res.data.message
									});
									this.close();
								}else{
									showNotify({
										type: 'success',
										message: "支付成功"
									});
								}
							})
						}, 2000);
						break;
				}
			},
		}
	};
</script>

<style>
	.head {
		text-align: center;
		font-size: 4vh;
		font-weight: 700;
	}
</style>